import React, { useEffect } from 'react';
import { Button, Col, Form, Input, message, Row, Tabs } from 'antd';
import { observer } from 'mobx-react-lite';
import FieldList from './components/FieldList';
import IndexList from './components/IndexList';
import TableInfoStore from './tableInfoStore';
import { useNavigate, useParams } from 'react-router-dom';
import PageContent from '@/layout/pageContent';
import PageFooter from '@/layout/pageFooter';

const { TabPane } = Tabs;

const Page: React.FC = () => {
    const { id } = useParams();
    const navigate = useNavigate();

    const {
        tab,
        setTab,
        selectOne,
        onFinish,
        createCodeClick,
        addPage,
        setNavigate
    } = TableInfoStore;

    const [form] = Form.useForm();

    useEffect(() => {
        console.log("useEffect---")
        setNavigate(navigate)
        if (id) {
            selectOne(id).then((res) => {
                form.setFieldsValue(res);
            });
        }else{
            addPage()
        }

    }, []);

    return (
        <>
            <PageContent title="表设置详情">
                <Form
                    form={form}
                    layout="horizontal"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onFinish}
                >
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item name="name" label="表名称">
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item name="comment" label="描述">
                                <Input />
                            </Form.Item>
                        </Col>

                        <Col span={12}>
                            <Form.Item name="templateType" label="模板类型">
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item name="subTable" label="子表名称">
                                <Input />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Tabs
                        activeKey={tab}
                        onChange={setTab}
                        tabPosition="top"
                        items={[
                            {
                                label: `字段信息`,
                                key: 'tab1',
                                children: <FieldList />,
                            },
                            {
                                label: `索引`,
                                key: 'tab2',
                                children: <IndexList />,
                            },

                        ]}

                    />

                </Form>

            </PageContent>
            <PageFooter>
                <Button type="primary" onClick={createCodeClick} style={{ marginRight: 8 }}>
                    生成代码
                </Button>
                <Button type="primary" onClick={form.submit}>
                    保存
                </Button>

            </PageFooter>
        </>
    );
};

export default observer(Page);